<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<title>学生-课程-成绩</title>
	<%@ include file="/common/commonLib.jsp"%>
	<link rel="stylesheet" type="text/css" href="<c:url value='/css/courseScore-stu.css'/>"/>
	<link rel="stylesheet" type="text/css" href="<c:url value='/css/common-main.css'/>"/>
	<script src="<c:url value='/js/courseScore-stu.js'/>" type="text/javascript" charset="utf-8"></script>
	<script src="../js/echarts.js"></script>
	<style>
		.point:hover{
			cursor:pointer;
		}

		/*body::-webkit-scrollbar {*/
		/*	display: none;*/
		/*}*/


		#main3 {
			width: 100%;
			height: 100vh;
			position: relative;
		}

		#stuTitle {
			position: absolute;
			top: 50px;
			lett: 50px;
			width: 100vw;
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin: 0 -40px;
			padding: 0;
			font-size: 25px;
			font-weight: 900;
		}

		.content {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border: 1px solid black;
			border-radius: 10px;
			padding: 20px;
		}
		#main2{
			position: relative;
		}
		#main1{
			position: relative;
		}

	</style>
</head>
<body>
<%@include file="/common/header.jsp"%>
<%@include file="classHeader.jsp"%>
<div class="container-fluid main">
	<div class="row">
		<!--课堂、任务、资源、成绩、评论、答疑-->
		<div class="col-xs-12 col-sm-12 col-md-9">
			<div class="row">
				<!--课堂、任务、资源、成绩、评论、答疑----内容-->
				<div class="col-md-12">
					<!-- 课堂、任务、资源、成绩、评论、答疑 ---导航 -->
					<%@include file="classNav.jsp"%>
					<!-- 显示成绩 -->
					<div class="course-score-stu">
						<div class="row">
							<!-- 成绩头部 -->
							<div class="col-md-12">
								<div class="score-title" style="display: flex;justify-content:center">
									<p>
										<span class="label" contenteditable="false">我的成绩</span>
									</p>
									&nbsp &nbsp&nbsp
									<p>
										<span class="label point" contenteditable="false" style="background: skyblue" onclick="TdOnClick(${sessionScope.id})">课程目标分析</span>
									</p>
								</div>
							</div>
							<!-- 成绩信息 -->
							<div class="col-md-12">
								<table class="table">
									<thead>
									<tr>
										<th title="平时成绩">平时成绩</th>
										<th title="任务成绩">任务成绩</th>
										<th title="理论考试成绩">理论考试成绩</th>
										<th title="实验成绩">实验成绩</th>
										<th title="总成绩">总成绩</th>
										<th class="show-pc" title="修改时间">修改时间</th>
									</tr>
									</thead>
									<tbody id="gradeDetail">

									</tbody>
								</table>
							</div>
							<!-- 成绩详情 -->
							<div class="col-md-12">
								<div class="score-detail-title">
									<span style="white-space:pre;">  </span><span class="line"></span>
									<span style="white-space:pre;">  </span><span class="detail-title">成绩详情</span>
									<span style="white-space:pre;">  </span><span class="line"></span>
								</div>
								<table id="score-detail-info" class="table">
									<thead>
									<tr>
										<th class="col1">
											<select class="form-control form-control-self" onchange="searchTaskScoreLog()" id="searchTaskScoreByType">
												<option selected = "selected" value="ALL">全部</option>
												<option value="TESTINLESSON">当堂测试</option>
												<option value="HOMEWORK">课后作业</option>
												<option value="LABTEST">实验任务</option>
											</select>
										</th>
										<th class="col2">任务名</th>
										<th class="col3">得分</th>
										<th class="col4 show-pc">更新时间</th>
									</tr>
									</thead>
									<tbody id="taskScoreList">

									</tbody>
								</table>
								<div class="page-content" id="scorePage">
									<nav class="pagination" role="navigation">
										<a class="last-page" href="#">
											<i class="fa fa-angle-left"></i>
										</a>
										<span class="page-number">...</span>
										<a class="next-page" href="#">
											<i class="fa fa-angle-right"></i>
										</a>
									</nav>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--教师、助教信息，课程简介-->
		<div class="col-xs-12 col-md-3">
			<%@include file="classRight.jsp"%>
		</div>
	</div>
</div>
<div id="scoreCharts" style="display: none">
	<div id="main3">
<%--		${stuName}--%>
		<div id="stuTitle">课程目标分析</div>
		<div class="content">
			<div id="main1" style="width: 600px;height:400px;"></div>
			<div id="main2" style="width: 600px;height:400px;"></div>
		</div>
	</div>
</div>
<%@include file="/common/footer.jsp"%>

</body>
<script>
	var data=${data};
	$(document).ready(function(){
		if (data.status != "success"){
			alert(data.message);
			return;
		}
		$("#score").css("color","#00b43c");
		initClassView(data.data.classView);
		initGrade(data.data.gradeView);
		initTaskScore();
	});

	var TdOnClick = function (id) {
		console.log(data)
		console.log(id)
		let courseId = data.data.classView.courseId;
		$.get(CONTEXT_PATH+"visualize?courseID="+courseId+'&stuID='+id,function (data) {
		}).then(function (data) {
			console.log(data)

			var myChart1 = echarts.init(document.getElementById('main1'));
			var myChart2 = echarts.init(document.getElementById('main2'));

			console.log(data.targetNames);
			let targetControl = data.targetControl;
			let targetNames = data.targetNames;
			let arr = [];
			arr.push(['score',  'target']);
			for(let i=0;i<targetControl.length;i++){
				let newArr = [];
				newArr.push(targetControl[i]*100);
				newArr.push(targetNames[i]);
				arr.push(newArr);
			}

			console.log(arr)
			var option1 = {
				dataset: {
					source:arr
				},
				toolbox: {
					feature: {
						// dataView: {show: true, readOnly: true},
						magicType: {show: true, type: ['line', 'bar']},
						restore: {show: true},
						saveAsImage: {show: true}
					},
				},
				title: {
					text: '课程目标掌握程度',
					left: 'center'
				},
				grid: {containLabel: true},
				xAxis: {name: '分数'},
				yAxis: {type: 'category'},
				visualMap: {
					orient: 'horizontal',
					left: 'center',
					min: 0,
					max: 100,
					text: ['高分', '低分'],
					// Map the score column to color
					dimension: 0,
					inRange: {
						color: ['#FD665F',  '#91cc75']
					}
				},
				series: [
					{
						type: 'bar',
						encode: {
							// Map the "amount" column to X axis.
							x: 'score',
							// Map the "product" column to Y axis
							y: 'target'
						},
						name: '课程目标掌握程度'
					}
				]
			};

			var option2 = {
				toolbox: {
					feature: {
						dataView: {show: true, readOnly: true},
						saveAsImage: {show: true}
					}
				},
				color : [ '#5470c6',  '#fac858', '#ee6666', '#73c0de','#3ba272', '#fc8452', '#9a60b4','#91cc75', '#ea7ccc'],
				title: {
					text: '课程目标占比',
					left: 'center'
				},
				series: [
					{
						name: '课程目标占比',
						type: 'pie',    // 设置图表类型为饼图
						radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
						data: data.pieChart // 数据数组，name 为数据项名称，value 为数据项值

					}
				]
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart1.setOption(option1);
			myChart2.setOption(option2);

			if(isNaN(data.pieChart[0].value)){
				layer.alert('暂时无数据分析~请等待老师安排噢')
			}else{
				layer.open({
					type: 1,
					title: data.stuName+'的课程目标分析',
					fixed: false, //不固定
					maxmin: true,
					closeBtn: 1,
					skin: 'layui-layer-molv',
					area: ['90vw', '90vh'],
					offset: '0px',
					content: $("#scoreCharts"),

				});
			}
		})



		// window.location.href = CONTEXT_PATH+"visualize?courseID="+data.data.classView.courseId+'&stuID='+id;
	}

	var initGrade = function(view){
		var gradeDetail = $("#gradeDetail");
		gradeDetail.empty();
		var s="<tr>";
		s+="<td title=\""+view.dailyGrade+"\">"+view.dailyGrade+"</td>";
		s+="<td title=\""+view.taskTotalGrade+"\">"+view.taskTotalGrade+"</td>";
		s+="<td title=\""+view.theoryTestGrade+"\">"+view.theoryTestGrade+"</td>";
		s+="<td title=\""+view.labTestGrade+"\">"+view.labTestGrade+"</td>";
		s+="<td title=\""+view.finalTotalGrade+"\">"+view.finalTotalGrade+"</td>";
		s+="<td class=\"show-pc\" title=\""+view.updateDate+"\">"+view.updateDate+"</td>";
		s+="</tr>";
		gradeDetail.append(s);
	}

	var initTaskScore = function(){
		var json={
			courseId:data.data.classView.courseId,
			pageNo:1
		};
		getTaskScore(json);
	}

	var getTaskScore = function(json){

		$.post(CONTEXT_PATH+"taskGradeListView/ajaxSListData", {
			data : JSON.stringify(json)
		}, function(data) {
			if(data.status=="success"){
				initTaskScoreLog(data.data);
			}else{
				layer.alert(data.message);
			}
		});
	}

	var getTaskType = function(type){
		if(type=="ASKINLESSON"){
			return "课堂提问";
		}else if(type=="TESTINLESSON"){
			return "当堂测试";
		}else if(type=="HOMEWORK"){
			return "课后作业";
		}else if(type=="LABTEST"){
			return "实验任务";
		}else{
			return "个人任务";
		}
	}

	var initTaskScoreLog = function(data){
		var taskList=$("#taskScoreList");
		taskList.empty();
		var list=data.list;
		if(list.length <= 0){
			var s="<tr><td colspan=\"4\">暂无记录</td></tr>";
			taskList.append(s);
		}else{
			for(var i=0;i<list.length;i++){
				var item=list[i];
				var s="<tr>";
				s+="<td title=\""+getTaskType(item.type)+"\">"+getTaskType(item.type)+"</td>";
				s+="<td title=\""+item.title+"\">"+item.title+"</td>";
				s+="<td title=\""+item.score+"\">"+item.score+"</td>";
				s+="<td class=\"show-pc\" title=\""+item.scoreDate+"\">"+item.scoreDate+"</td>";
				s+="</tr>";
				taskList.append(s);
			}
		}

		initPages(data.pageNo,data.allpages);
	}

	var searchTaskScoreLog = function(){
		var json={
			courseId:data.data.classView.courseId,
			pageNo:1
		};
		var  type=$("#searchTaskScoreByType  option:selected").val();
		if(type != "ALL"){
			json.type=type;
		}
		getTaskScore(json);
	}

	var initPages = function(pageNo,allpages){

		var lastPageObj=$("#scorePage .last-page");
		var nextPageObj=$("#scorePage .next-page");
		var pageNumberObj=$("#scorePage .page-number");
		var lastPage=pageNo-1;
		if(lastPage<=0){//设置disableed
			lastPage=1;
		}else{
			$("#scorePage .last-page").bind("click",{pageNo:lastPage},getPage);
		};
		var nextPage = pageNo+1;
		if(nextPage>allpages){
			nextPage=allpages;
		}else{
			$("#scorePage .next-page").bind("click",{pageNo:nextPage}, getPage);
		}

		/* 需要进一步改进上下这块 */
		if(allpages <= 1){
			$("#scorePage").hide();
		}else{
			pageNumberObj.text("第"+pageNo+"页/共"+allpages+"页");
			$("#scorePage").show();
		}
	}
	var getPage = function(event){
		var json={
			courseId:data.data.classView.courseId
		};
		var  type=$("#searchTaskScoreByType  option:selected").val();
		if(type != "ALL"){
			json.type=type;
		}
		json.pageNo=event.data.pageNo;
		getTaskScore(json);
	}


</script>
</html>